<template>
  <div
    class="account-item"
    :data-bill_id="accountItem.bill_id"
    @click="$emit('account-item-e', accountItem)"
  >
    <div class="account-item-left">
      <p class="account-name">{{accountItem.type_str}}</p>
      <p class="account-time">{{accountItem.add_time_str || accountItem.addtime}}</p>
    </div>
    <p class="account-item-right" :class="showAmountStyle(accountItem.amount)">
      {{accountItem.amount | formataAmount(accountSym)}} {{accountItem.currency_code}}
    </p>
  </div>
</template>

<script>
export default {
  props: {
    accountItem: Object,
    accountSym: String
  },
  // "bill_id": "1810311835176070299",
  // "type": "1",
  // "amount": "-7.7474",
  // "addtime": "1540982117",
  // "type_str": "支付订单",
  // "currency_code": "CNY"
  data: function() {
    return {};
  },
  computed: {},
  mounted() {
    // console.log(this.accountSym);
  },
  methods: {
    showAmountStyle(amount) {
      return {
        amount: amount < 0 ? true : false
      };
    },
    accountItemClick(e) {}
  },
  filters: {
    formataAmount(amount, accountSym) {
      // console.log(amount, accountSym);
      if (accountSym == "yes" && amount > 0) amount = "+" + amount;
      return amount;
    }
  }
};
</script>

<style lang="less" scoped>
.account-item {
  padding:24px 30px;
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #ededf0;
}
.account-item:last-child {
  border-bottom: 0;
}
.account-item-left {
  flex:1;
}
.account-item-left .account-name {
  .line-clamp();
  line-height: 44px;
  font-size: 30px;
}
.account-item-left .account-time {
  margin-top:20px;
  color: rgb(153, 153, 153);
  font-size: 24px;
}
.account-item .account-item-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 20px;
  font-size: 28px;
}
.account-item-right.amount {
  color: #f05521;
}
</style>
